<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/common.php';

$item_id = $_GET['item_id'];
$t = item::getOlderById($item_id);
$older_item_id = intval($t['item_id']);
$t = item::getNewerById($item_id);
$newer_item_id = intval($t['item_id']);

$item = item::getById($item_id);

$user_id = $item['user_id'];
$author = user::getById($user_id);
if (empty($item))
{
	sys::gotoUrl('/');
	return false;
}

$item_image_large = $item['item_image_l'];
$item_image_original = $item['item_image_o'];
$item_emotion = $item['item_emotion'];
$circle_list = item::getCircleList($item_id);
$reply_list = item::getReplyList($item_id);
$reply_count = item::getReplyCount($item_id);
$my_rate = item::getMyRateById($item_id);

$rate_yes_count = item::getYesCount($item_id);
$rate_no_count = item::getNoCount($item_id);
$image_info = getimagesize(__dir__.$item_image_large);

$item_image_original = file_exists(__dir__.$item_image_original) ? $item_image_original : $item_image_large;
$o_image_info = getimagesize(__dir__.$item_image_original);
$o_image_size = filesize(__dir__.$item_image_original);

function size_hum_read($size){
	$i=0;
	$iec = array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
	while (($size/1024)>1) {
	$size=$size/1024;
	$i++;
	}
	return substr($size,0,strpos($size,'.')+2).$iec[$i];
}

page::printTop();
?>
<div style="padding-top:5px;color:#555;font-size:13px;text-align:right;">
提示：点击图片并输入文字可以进行圈图评论。另外，按左右键也可以快速切换图片哦！Have fun！
</div>
<div id="big_view" style="text-align:center">
	<div class=view_emotion><?php echo $item_emotion; ?></div>
	<div>
		<input <?php if ($my_rate==ITEM_RATE_YES) echo 'disabled'; ?> type=button id="button_like" value="我喜欢！" />
		<input <?php if ($my_rate==ITEM_RATE_NO) echo 'disabled'; ?> type=button id="button_hate" value="不喜欢" />
	</div>
	<div id=view_image_outer><img height=<?php echo $image_info[1];?> width=<?php echo $image_info[0];?> onerror="this.src='/images/no_image_avail.jpg'" id=view_image class=view_image src="<?php echo $item_image_large; ?>" /><div>
	<a href="javascript:" class="toggle_circles">隐藏<?php echo count($circle_list); ?>条圈评</a><a href="javascript:" class="toggle_circles" style="display:none;">显示圈评</a>&nbsp;&nbsp;
	<a href="<?php echo $item_image_original; ?>" target="_blank">查看原图</a>
	(<?php echo $o_image_info[0];?>X<?php echo $o_image_info[1];?>
	<?php echo size_hum_read($o_image_size); ?>)&nbsp;&nbsp;<span class=view_author><a href="/user/<?php echo $author['user_id']; ?>/"><?php echo $author['user_nickname']; ?></a> - <?php echo sys::getTimeString($item['create_time']); ?></span>
</div>

<div class="reply_list">
<div class="reply_headline">
	<?php echo $rate_yes_count;?>人喜欢，<?php echo $rate_no_count;?>人不喜欢<br><br>
	评论(<?php echo $reply_count;?>条)
	<input type=button id="button_add_comment" value="添加评论" />
</div>

<form action="/item/<?php echo $item_id; ?>/reply/" method="post" id="comment_form">
<div id="comment_area">
	<textarea id="comment_reply" name="reply"></textarea>
	<input type=button id="comment_submit" value="发  表" />
</div>
</form>

<?php
foreach ($reply_list as $reply)
{
	$reply['create_time'] = sys::getTimeString($reply['create_time']);
	$reply['user_nickname'] = $reply['user_id'] == user::getId() ? '我' : $reply['user_nickname'];
?>

<div class="reply_line">
	<hr class="reply_split_line">
	<span class="reply_number">[<?php echo $reply['reply_number']; ?>楼]</span>
	<span class="reply_comment"><?php echo $reply['reply']; ?></span>
	<span class="reply_author">- <a href="/user/<?php echo $reply['user_id']; ?>/"><?php echo $reply['user_nickname']; ?></a>
	(<?php echo $reply['create_time']; ?>)</span>
</div>
<?php } ?>
</div>

<script>
$(function(){
	$("#button_like").bind('click', function(e){
		if (!$.cookie('user_id'))
			$.jGrowl('请先登录');
		else
			document.location.href = "/item/<?php echo $item_id; ?>/rate/yes/";
	});

	$("#button_hate").bind('click', function(e){
		if (!$.cookie('user_id'))
			$.jGrowl('请先登录');
		else
			document.location.href = "/item/<?php echo $item_id; ?>/rate/no/";
	});

	$("#button_add_comment").bind('click', function(e){
		$("#comment_area").toggle(200);
	});

	$("#comment_submit").bind('click', function(e){
		var reply=$("#comment_reply").attr('value');
		if (reply.length > 0)
		{
			$("#comment_form").submit();
		}
		else
		{
			alert("至少5个字。");
		}
	});
});

$(function(){
	$("body").keydown(function(e) {
		if(e.keyCode == 37) { // left
			document.location.href="/item/<?php echo $newer_item_id; ?>/";
		}
		else if(e.keyCode == 39) { // right
			document.location.href="/item/<?php echo $older_item_id; ?>/";
		}
	});

	$("#comment_reply").keydown(function(e) {
		if(e.keyCode == 37 || e.keyCode == 39) return false;
	});


	<?php echo 'var circles='.json_encode($circle_list).';'; ?>
	setTimeout(function(){
		var image_width = $('#view_image').width();
		var image_height = $('#view_image').height();
		var image_x = $('#view_image').offset().left;
		var image_y = $('#view_image').offset().top;

		var arrow_newer = $('<div class=big_arrow id=arrow_newer>&lt;</div>')
				.css({"left":image_x-100-100,"top":image_y+20})
				.bind('click', function(ev){
					document.location.href="/item/<?php echo $newer_item_id; ?>/";
				}).hover(function(e){
					$(this).css({borderColor:'#333', color:'#444'});
					}, function(e){
						$(this).css({borderColor:'#222', color:'#333'});
					});
		arrow_newer.appendTo($('#big_view'));


		var arrow_older = $('<div class=big_arrow id=arrow_older>&gt;</div>')
				.css({"left":image_x+image_width+100,"top":image_y+20})
				.bind('click', function(ev){
					document.location.href="/item/<?php echo $older_item_id; ?>/";
				}).hover(function(e){
					$(this).css({borderColor:'#333', color:'#444'});
					}, function(e){
						$(this).css({borderColor:'#222', color:'#333'});
					});
		arrow_older.appendTo($('#big_view'));
		var i=0;
		while (circle = circles.pop()) {
			if (!circle.comment) continue;

			var item=$('<div class="view_circle">'+circle.comment+'</div>')
				.css({display:"none",left:circle.x*image_width+image_x,
					top:circle.y*image_height+image_y});
			item.appendTo($('#view_image_outer')).slideToggle(500);
		}
	}, 100);
});

$(function(){
	var writeData = function(comment, left, top, image_width, image_height, image_left, image_top) {
		var x=(left-image_left)/image_width;
		var y=(top-image_top)/image_height;

		$.post('/port/item/<?php echo $item_id; ?>/circle/',
			{x:x, y:y, comment:comment},
			function(data){
				$.jGrowl(data.result?'圈图评论成功！':'圈图评论失败');
			}, "json");
	}

	var confirmPublish = function() {
		if (!$.cookie('user_id'))
		{
			alert('圈图评论需要登录才能成功发表。')
			return false;
		}

		if (!confirm("确认发表？"))
		{
			$('#circle_box').remove();
			return false;
		}

		var str=$('#circle_box').children('input').attr('value')+'';

		var left=$('#circle_box').offset().left;
		var top=$('#circle_box').offset().top;

		if (!str.length) return false;
		var item=$('<div class="view_circle">'+str+'</div>')
			.css({"left":left,"top":top});
		$('#circle_box').remove();
		item.appendTo($('#view_image_outer'));

		writeData(str, left, top, $('#view_image').width(), $('#view_image').height(),
			$('#view_image').offset().left, $('#view_image').offset().top);
	}

	$('#view_image').bind('click', function(ev){
		if ($('#circle_box').size())
		{
			$('#circle_box').remove();
		}

		var box=$('<div id="circle_box"><input id="circle_box_input" maxlength=20 /></div>')
			.css({"left":ev.pageX,"top":ev.pageY})
			.keypress(function(e) {
				if (e.which == 13) {
				 	confirmPublish();
				} else if (e.which == 27) {
				 	$(this).remove();
				}
			}).keydown(function(e) {
				if(e.keyCode == 37 || e.keyCode == 39) return false;
			}).bind('click', function(ev){
				return false;
			});

		box.appendTo($('#view_image_outer'));
		setTimeout(function(){$('#circle_box_input').focus()}, 200);
		return false;
	});

	$('body').bind('click', function(ev){
		if ($('#circle_box').size())
		{
			$('#circle_box').remove();
		}
	});

	$('.toggle_circles').bind('click', function(ev){
		$('.view_circle').slideToggle(500);
		$('.toggle_circles').toggle();
		return false;
	});
});
</script>

<?php
page::printTail();
